<template>
  <ul v-if="tree && Array.isArray(tree) && tree.length > 0" class="list-b-1">
    <li v-for="item in tree" :key="item[idName]">
      <div
        class="treeTitle"
        :class="{
          onTree: item[propsSet.value || 'value'] === treeOn,
        }"
        @click="click_btn(item)">
        <div
          :style="{
            paddingRight: index > 0 ? `${12 * index}px` : 0,
          }" />
        <template v-if="item[propsSet.children] && item[propsSet.children].length > 0">
          <el-icon v-if="item.handover"><ArrowRight /></el-icon>
          <el-icon v-else><ArrowDown /></el-icon>
        </template>
        <el-icon v-else-if="tree.some((tree: any) => 'children' in tree) && index > 0"></el-icon>
        <template v-if="$slots.icon">
          <slot name="icon" :row="item" :index="index" />
        </template>
        <div class="flexAuto text-overflow-1">
          <template v-if="$slots.default">
            <slot :row="item" :index="index" />
          </template>
          <template v-else>
            {{ item[propsSet.label || 'label'] }}
          </template>
        </div>
        <div class="btn list-r-6" @click.stop v-if="$slots.btn && isEdit">
          <slot name="btn" :row="item" :index="index" />
        </div>
      </div>
      <template v-if="!item.handover">
        <TreeBox :tree="item[propsSet.children || 'children']" :treeOn="treeOn" :propsSet="propsSet" :index="index + 1" :isEdit="isEdit" @changeBtn="changeBtn">
          <template #icon="{ row, index }" v-if="$slots.icon">
            <slot name="icon" :row="row" :index="index" />
          </template>
          <template #default="{ row, index }" v-if="$slots.default">
            <slot :row="row" :index="index" />
          </template>
          <template #btn="{ row, index }" v-if="$slots.btn">
            <slot name="btn" :row="row" :index="index" />
          </template>
        </TreeBox>
      </template>
    </li>
  </ul>
</template>
<script setup lang="ts">
import TreeBox from './TreeBox.vue';
const props = withDefaults(
  defineProps<{
    treeOn?: string;
    tree?: any; //主表内容
    index?: number;
    idName?: string;
    isEdit?: boolean;
    titleName?: string;
    propsSet?: any; //配置选项
  }>(),
  {
    tree: [],
    isEdit: true,
    index: 0,
    idName: 'id',
    propsSet: {
      label: 'label',
      value: 'value',
      children: 'children',
    },
  },
);
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'changeBtn', value: any, row: any): void;
}>();
const click_btn = (row: any) => {
  let _childrenArr: any = row[props.propsSet.children];
  if (_childrenArr && _childrenArr.length > 0) {
    row.handover = !row.handover;
  } else {
    changeBtn(row[props.propsSet.value || 'value'], row);
  }
};
const changeBtn = (value: any, row: any) => {
  emit('changeBtn', value, row);
};
</script>
<style scoped lang="scss">
ul {
  padding: 1px 0;
}
.treeTitle {
  padding: 0 6px;
  display: flex;
  align-items: center;
  cursor: pointer;
  min-height: 32px;
  .btn {
    display: none;
  }
  &:hover {
    display: flex;
    background-color: #{$hover};
    color: #{$primary};
    .btn {
      display: flex;
      align-items: center;
    }
  }
  &.onTree {
    background-color: #{$primary};
    color: #{$white};
  }
}
</style>
